<template>
  <div class="page">
    <div class="title">上传</div>
    <div class="hint">协助分析Android移植OHOS的风险及建议</div>
    <el-upload drag :before-upload="upload" list-type="json" action="">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处, 或<em>点击上传</em></div>
      <div class="el-upload__tip">只能上传json文件</div>
    </el-upload>
  </div>
</template>

<script>
import riskHelper from "@/helper/RiskHelper"

export default {
  name: "Upload",
  methods: {
    upload(file) {
      if (!file.name.endsWith('.json')) {
        return false
      }

      const reader = new FileReader()
      reader.onload = () => {
        const result = JSON.parse(reader.result.toString())

        this.sortResult(result.data)
        riskHelper.handleData(result.data).then(() => {
          // console.log(JSON.stringify(result.data))

          this.$router.push({
            name: 'Result',
            params: { result }
          })
        })
      }
      reader.readAsText(file)
      return false
    },
    sortResult(data) {
      data.sort((a, b) => {
        const classA = this.getQualifiedName(a)
        const classB = this.getQualifiedName(b)
        if (classA < classB) return -1
        if (classA > classB) return 1
        return 0
      })

      data.forEach(d => {
        if (d.methods) {
          d.methods.sort((a, b) => {
            const methodA = a.method
            const methodB = b.method
            if (methodA < methodB) return -1
            if (methodA > methodB) return 1
            return 0
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.page
  width 100%
  height 100%

  display flex
  flex-direction column
  align-items center
  justify-content center

  .title
    width 360px
    font-size 24px
    color #333
    margin-bottom 15px

  .hint
    width 360px
    font-size 13px
    color #999
    margin-bottom 20px
</style>
